<%@ include file="/WEB-INF/views/includes.jsp"%>
<%@ page session="false"%>
<%@ page isELIgnored="false"%>
<html>
<head>
<title>Home</title>

<link rel="stylesheet" type="text/css" href="/resource/css/default.css" />
<script type="text/javascript" src="/resource/js/jquery-1.8.min.js"></script>

<script type="text/javascript">
	var optionArray = new Array();

	<c:forEach var="option" items="${product.productionOptionList}">
	optionArray.push('${option.product_option_id}');
	</c:forEach>
	
	var jsproductInstanceList = new Array();
	
	<c:forEach var="productInstance" items="${product.productInstanceList}">
		var innerProductInstance = new Array();
		<c:forEach var="optionValue" items="${productInstance.productOptionValueList}">
			innerProductInstance.push('${optionValue.product_option_value_id}');
		</c:forEach>
		innerProductInstance.push('${productInstance.retail_price}');
		innerProductInstance.push('${productInstance.quantity}');
		jsproductInstanceList.push(innerProductInstance);

	</c:forEach>
	
	
    function initOptionsButton(){
    	disableAlltheOptions();
    	var size = optionArray.length;
    	for (var t = 0; t < jsproductInstanceList.length; t++) {
    	        var innerProductInstance = jsproductInstanceList[t];
    			if(jsproductInstanceList[t][size+1]>0){
    				for(var p = 0; p < size; p++){
    					var innerRadioButton = document.getElementById(jsproductInstanceList[t][p]);
    					if(innerRadioButton.disabled){
    						innerRadioButton.disabled = false;
    					}
    				}
    			}
    	 }
    }
    
    function changeTheQuantiy(){
    	
    	var selectOptions = new Array();
    	for (var i = 0; i < optionArray.length; i++) {
            var radioButtons = document.getElementsByName(optionArray[i]);
            var flag=0;
            for (var x = 0; x < radioButtons.length; x ++) {
            	 if (radioButtons[x].checked) {
            		 flag=1;
            		 selectOptions.push(radioButtons[x].value);
            	 }
            }
            if(flag==0){
            	return;
            }
		}
    	var size = optionArray.length;
    	var changedFlag = false;
    	for (var t = 0; t < jsproductInstanceList.length; t++) {
    	        var innerProductInstance = jsproductInstanceList[t];
    	        var flag = true;
    	        for(var p = 0; p < size; p++){
    	        	if(innerProductInstance[p]!=selectOptions[p]){
    	        		flag = false;
    	        	}
    	        }
//     	        alert(flag);
    	        if(flag){
    	        	document.getElementById("quantityLable").innerHTML = innerProductInstance[size+1];
    	        	changedFlag = true;
    	        	return;
    	        }
    	 }
    	if(!changedFlag){
    		document.getElementById("quantityLable").innerHTML = 0;
    	}
    }

	function disableAlltheOptions() {
		for (var i = 0; i < optionArray.length; i++) {
            var radioButtons = document.getElementsByName(optionArray[i]);
            for (var x = 0; x < radioButtons.length; x ++) {
            	  radioButtons[x].disabled = true;
            }
		}
	}
	
	function submitOrder() {
		for (var i = 0; i < optionArray.length; i++) {
            var radioButtons = document.getElementsByName(optionArray[i]);
            var flag=0;
            for (var x = 0; x < radioButtons.length; x ++) {
            	 if (radioButtons[x].checked) {
            		 flag=1;
            	 }
            }
            if(flag==0){
            	alert('Please choose all the options!');
            	return;
            }
		}
		alert('Submit your order successfully!');
	}
	
	$(document).ready(function() {
		initOptionsButton();
	});

 


</script>


<style>


</style>

</head>
<body>

	<caption>Product Detail:</caption>
	 <br><br>
	 Images: <br>
	 
	 <table class="dataTable">
	 <tr>
	 <c:forEach var="image" items="${product.imageEntityList}">
		<td scope="row" class="spec"><img height="120" width="120" src=<c:out value="${image.path}" /> /></td>
	 </c:forEach>
	 </tr>
	 </table>
	 		
	 <br>
	 
	 Attribute: <br>
	 
	 <table class="dataTable">
	
	 <c:forEach var="attribute" items="${product.productionAttributeList}">
	  <tr>
		<td>${attribute.attribute_name}:</td>
		<td>${attribute.attribute_value}</td>
	  </tr>
	 </c:forEach>
	 
	 </table>
	 		
	 <br>
	 
	 Options: <br>
	 
	 
	 <table class="dataTable">
	
	 <c:forEach var="option" items="${product.productionOptionList}">
	  <tr>
		<td>${option.option_name}:</td>
		<td>
		<c:forEach var="productOptionValue" items="${option.productionOptionValueList}">
			<input type="radio" name="${option.product_option_id}" id="${productOptionValue.product_option_value_id}" value="${productOptionValue.product_option_value_id}" onclick="changeTheQuantiy();" />
			${productOptionValue.product_option_value}
		</c:forEach>
		</td>
	  </tr>
	 </c:forEach>
	 
	 </table>
	 		
	 <br>
	 <input type="text"  name="quantity" value=1   size=5/> < Quantity: <span id="quantityLable">${product.totleQuantity}</span> > <input type="button" id="submitOrderButton" onclick="submitOrder()" value="Submit" />
	 <br><br><br><br><br><br>	
	 
</body>
</html>
